<template>
	<view>
		<uni-nav-bar left-icon="back" @clickLeft='back' fixed left-text="返回"  title="完整宝宝信息"></uni-nav-bar>
		<view class="wrap">
			<view class="title">请完善宝宝信息</view>
			<view class="subtitle">我们将用最快捷的方式展现您的宝贝健康每一天</view>
			<viww class='avatar-group'>
				<view class="avatar-wrap">
					<img class='avatar' @click="chooseGender(1)" :src="male" alt="">
					<text>男</text>
				</view>
				<view class="avatar-wrap">
					<img class='avatar' @click="chooseGender(2)" :src="female" alt="">
					<text>女</text>
				</view>
			</viww>
			<form @submit="formSubmit" @reset="formReset">
				<!-- <view class="phone">
					家长姓名 <input class="uni-input input" v-model="account_name" placeholder-style='margin-top:15rpx;' focus placeholder="请输入家长姓名" />
				 </view> -->
				 <view class="phone">
				 	宝宝姓名 <input class="uni-input input" v-model="customer_name" placeholder-style='margin-top:15rpx;' focus placeholder="请输入宝宝姓名" />
				 </view>
				 <view class="phone">
				 	出生年月 
					
					<!-- <input class="uni-input input" v-model="birthday" placeholder-style='margin-top:15rpx;' focus placeholder="自动获得焦点" /> -->
					<picker mode="date" :value="birthday" :start="startDate" :end="endDate" @change="changeBirthDay">
						<view class="item">{{birthday}}</view>
					</picker>
				 </view>
				  <view class="button" @click="saveCustomer">提交</view>
			</form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				account_name : '',
				birthday : '2020-01-01',
				customer_name : '',
				male : 'https://storage.ganorglobal.com/miniapp-service/static/appraise/man1.png',
				female : 'https://storage.ganorglobal.com/miniapp-service/static/appraise/female2.png',
				gender : 1,
				newCustomer : {}
			}
		},
		onLoad() {
			this.newCustomer = getApp().globalData.newCustomer;
		},
		methods: {
			back () {
				uni.navigateBack({
					delta:1
				})
			},
			saveCustomer () {
				// if (!this.account_name) {
				// 	uni.showToast({
				// 		icon:'none',
				// 		title:'请输入家长姓名'
				// 	})
				// 	return ;
				// }
				if (!this.customer_name) {
					uni.showToast({
						icon:'none',
						title:'请输入宝宝姓名'
					})
					return ;
				}
				if (!this.birthday) {
					uni.showToast({
						icon:'none',
						title:'请选择宝宝生日'
					})
					return ;
				}
				uni.showLoading({
					title:'加载中...'
				})
				let param = {
					customer_id : this.newCustomer.customer_id,
					customer_name : this.customer_name,
					sex : this.gender || 1,
					birthday : this.birthday
				}
				this.common.http.request('/api/v1/appraisal/customer/modify','POST',param,res => {
					if (res.data.code == 0) {
						uni.showToast({
							icon:'none',
							message:'完善宝宝信息成功'
						})
						if (res.data.data == true) {
							try {
								uni.switchTab({
									url:'../tutorial/tutorial'
								})
							} catch (e) {
								console.log('xxc',e)
							}
						}
					}
					uni.hideLoading();
				})
			},
			chooseGender(type) {
				if (type == 1) {
					this.male = 'https://storage.ganorglobal.com/miniapp-service/static/appraise/man1.png';
					this.female = 'https://storage.ganorglobal.com/miniapp-service/static/appraise/female2.png';
					this.gender = 1;
				} else {
					this.male = 'https://storage.ganorglobal.com/miniapp-service/static/appraise/man2.png';
					this.female = 'https://storage.ganorglobal.com/miniapp-service/static/appraise/female1.png';
					this.gender = 2;
				}
			},
			changeBirthDay (e) {
				if (e.target.value > this.currentDate) {
					uni.showToast({
						icon:'none',
						title: '生日不能大于当前日期'
					}) 
					return;
				} else {
					this.date = e.target.value;
				}
			},
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrap{
		padding: 60rpx;
	}
	.title{
		margin-top: 10rpx;
		height:82rpx;
		font-size:52rpx;
		font-family:PingFangSC-Semibold,PingFang SC;
		font-weight:600;
		color:rgba(51,51,51,1);
		line-height:73rpx;
		letter-spacing:1rpx;
	}
	.subtitle{
		height:32rpx;
		font-size:22rpx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(13,56,110,1);
	}
	.avatar-group{
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 40rpx 0;
	}
	.avatar-wrap{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}
	.avatar{
		width: 151rpx;
		height: 151rpx;
		border-radius: 50%;
		margin: 20rpx 40rpx;
	}
	.input{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.phone{
		margin-top: 26rpx;
		padding: 0 62rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width:650rpx;
		height:90rpx;
		background:rgba(255,255,255,1);
		border-radius:46rpx;
		border:1rpx solid rgba(151,151,151,1);
		font-size:24rpx;
		font-family:PingFangSC-Medium,PingFang SC;
		font-weight:500;
		color:rgba(102,102,102,1);
	}
	.code{
		font-size:32rpx;
		font-family:PingFangSC-Semibold,PingFang SC;
		font-weight:600;
		color:rgba(182,29,36,1);
	}
	.button{
		background:rgba(182,29,36,1);
		margin-top: 40rpx;
		width:650rpx;
		height:98rpx;
		border-radius:43rpx;
		text-align: center;
		line-height: 98rpx;
		border:1rpx solid rgba(151,151,151,1);
		color: #fff;
	}
</style>
